<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="s"%>
<%@ attribute name="formContent" fragment="true"%>
<%@ attribute name="headPart" fragment="true"%>
<%@ attribute name="pageName" required="false"%>
<link href="<c:url value="/resources/css/common.css" />" rel="stylesheet">
<s:admin pageName="${pageName}">
<jsp:attribute name="headPart">
	<script src="<c:url value="/resources/jquery/jquery-ui.min.js" />"></script>
	<link href="<c:url value="/resources/jquery/jquery-ui.min.css" />" rel="stylesheet">
	<jsp:invoke fragment="headPart"></jsp:invoke>
	<script>
		var _imageProductId, _index;
	
		function toEditImage(imageId, index){
			$("#imageProductId").val(imageId);
			$("#index").val(index);
			_imageProductId = imageId;
			_index = index;
		}
		
		function toPickImage(imageId, subBrandId){
			_imageProductId = imageId;
			$.get('thumbs?subBrandId=' + subBrandId, function(data){
				var html = [];
				for (var i = 0; i < Math.min(data.length, 40); i++) {
					var item = data[i];
					html.push('<img src="'+item.thumbUrl+'" data-url="'+item.url+'">')
				}
				$('#thumb-container').html(html.join(''));
				$('#thumb-container img').click(function(){
					var me = $(this);
					if(me.hasClass('thumb_select')){
						me.removeClass('thumb_select');
					}else{
						var selected = $('#thumb-container img.thumb_select');
						if(selected.size() < 4){
							me.addClass('thumb_select');
						}
					}
				})
			})
		}
		
		function submitPick(){
			$('#pickImageModel').modal('hide');
			var imgs = [];
			var selected = $('#thumb-container img.thumb_select');
			for (var i = 0; i < Math.min(4, selected.size()); i++) {
				imgs.push($(selected[i]).attr('data-url'));
			}
			$.post('saveBatch', {
				urls: imgs.join(','),
				imageProductId: _imageProductId
			},function(){
				var changed = $('#p' + _imageProductId + " img");
				for (var j = 0; j < changed.size(); j++) {
					var item = changed[j];
					var src = item.src;
					var x = src.indexOf('?');
					if(x > -1){
						src = src.substring(0, x);
					}
					item.src = src + "?t=" + new Date().getTime();
				}
			})
		}
		
		function toOpenBigImage(filename){
			var href = "serve/" + filename + "?s=l&t=" + new Date().getTime();
			window.open(href, '_blank');
		}
		
		$(function(){
			$("#myFrame").load(function(event){
				$("#imageFile").val("");
				$("#imageUrl").val("");
				$("#imageId").val("");
				$('#editImageModel').modal('hide');
				var path = event.target.contentDocument.body.innerText;
				if(path.length < 100){
					var img = $("#p" + _imageProductId + " .i" + _index);
					img.attr("src", "serve/" + path);
				}
			});
			
			$(".imageItem").hover(function(){
				$(this).find(".img-edit").show();
			}, function(){
				$(this).find(".img-edit").hide();
			});
			
			$(".imageItem img").draggable({
				start: function(event, ui){
					ui.helper.css('z-index', 1);
				},
				stop: function(event, ui){
					ui.helper.css('z-index', 0).css('left', 0).css('top', 0);
				}
			});
			$(".imageItem").droppable({
				accept: function(draggable){
					return draggable.parent().parent()[0] == $(this).parent()[0];
				},
				hoverClass: "drop-active",
				drop: function(event, ui){
					var src = ui.draggable;
					var srcContainer = ui.draggable.parent();
					var tgtContainer = $(this);
					if(srcContainer[0] != tgtContainer[0]){
						var tgt = tgtContainer.find("img");
						tgtContainer.prepend(src);
						srcContainer.prepend(tgt);
						$.get("<c:url value="/img/order/"/>" + srcContainer.parent()[0].id.substring(1), {
							srcIndex: src.attr('order'),
							tgtIndex: tgt.attr('order')
						}, function(data){
							if(data != 1){
								alert("Operation faild.")
							}
						})
					}
				}
			})
		})
	</script>
</jsp:attribute>
<jsp:body>
<iframe id="myFrame" name="myFrame" style="position: absolute; left:-9999px;"></iframe>
<div class="row main">
	<h4 class="page-header">Image</h4>
	<jsp:invoke fragment="formContent"></jsp:invoke>
		
	<div class="col-md-12">
		<c:forEach items="${page.getContent()}" var="ip">
		<div style="clear:left">
			<div>
				<a target="_blank" href="http://photo.bitauto.com/serialmore/${ip.subBrandId}/2014/11/1">
					${ip.brand}&nbsp;${ip.brandType}&nbsp;${ip.subBrand}
				</a>
				<a class="btn btn-default btn-xs" data-toggle="modal" data-target="#pickImageModel" onclick="toPickImage(${ip.id}, '${ip.subBrandId}')">Pick up</a>
			</div>
			<div id="p${ip.id}">
				<div class="imageItem">
	      			<img order="0" class="i0" height="180" onclick="toOpenBigImage('${ip.image1}')" src="<c:url value="/img/serve/${ip.image1}"/>" />
					<div class="img-edit">
						<a class="btn btn-default btn-xs" data-toggle="modal" data-target="#editImageModel" onclick="toEditImage(${ip.id}, 0)">
	       					edit
	       				</a>
	       				<a class="btn btn-default btn-xs" target="_blank" href="http://image.baidu.com/search/index?ct=201326592&z=&tn=baiduimage&ipn=r&word=${ip.brand} ${ip.brandType} ${ip.subBrand}&pn=0&istype=2&ie=utf-8&oe=utf-8&cl=2&lm=-1&st=-1&fr=&fmq=&ic=0&se=&sme=&width=&height=&face=0">
	    					baidu
	    				</a>
    				</div>
       			</div>
       			<div class="imageItem">
	      			<img order="1" class="i1" height="180" onclick="toOpenBigImage('${ip.image2}')" src="<c:url value="/img/serve/${ip.image2}"/>" />
	       			<div class="img-edit">
		       			<a class="btn btn-default btn-xs" data-toggle="modal" data-target="#editImageModel" onclick="toEditImage(${ip.id}, 1)">
	       					edit
	       				</a>
	       				<a class="btn btn-default btn-xs" target="_blank" href="http://image.baidu.com/search/index?ct=201326592&z=&tn=baiduimage&ipn=r&word=${ip.brand} ${ip.brandType} ${ip.subBrand}&pn=0&istype=2&ie=utf-8&oe=utf-8&cl=2&lm=-1&st=-1&fr=&fmq=&ic=0&se=&sme=&width=&height=&face=0">
	    					baidu
	    				</a>
    				</div>
       			</div>
       			<div class="imageItem">
	       			<img order="2" class="i2" height="180" onclick="toOpenBigImage('${ip.image3}')" src="<c:url value="/img/serve/${ip.image3}"/>" />
	       			<div class="img-edit">
		       			<a class="btn btn-default btn-xs" data-toggle="modal" data-target="#editImageModel" onclick="toEditImage(${ip.id}, 2)">
	       					edit
	       				</a>
	       				<a class="btn btn-default btn-xs" target="_blank" href="http://image.baidu.com/search/index?ct=201326592&z=&tn=baiduimage&ipn=r&word=${ip.brand} ${ip.brandType} ${ip.subBrand}&pn=0&istype=2&ie=utf-8&oe=utf-8&cl=2&lm=-1&st=-1&fr=&fmq=&ic=0&se=&sme=&width=&height=&face=0">
	    					baidu
	    				</a>
    				</div>
       			</div>
       			<div class="imageItem">
	       			<img order="3" class="i3" height="180" onclick="toOpenBigImage('${ip.image4}')" src="<c:url value="/img/serve/${ip.image4}"/>" />
	       			<div class="img-edit">
		       			<a class="btn btn-default btn-xs" data-toggle="modal" data-target="#editImageModel" onclick="toEditImage(${ip.id}, 3)">
	       					edit
	       				</a>
	       				<a class="btn btn-default btn-xs" target="_blank" href="http://image.baidu.com/search/index?ct=201326592&z=&tn=baiduimage&ipn=r&word=${ip.brand} ${ip.brandType} ${ip.subBrand}&pn=0&istype=2&ie=utf-8&oe=utf-8&cl=2&lm=-1&st=-1&fr=&fmq=&ic=0&se=&sme=&width=&height=&face=0">
	    					baidu
	    				</a>
    				</div>
       			</div>
			</div>
		</div>
       	</c:forEach>
	</div>
	<c:if test="${not empty page}">
		<div class="col-md-11 text-right">
      		<s:paging page="${page}"></s:paging>
      	</div>
    </c:if>
</div>

<!-- Edit Image Modal -->
<form target="myFrame" class="form-horizontal" action="save" method="POST" enctype="multipart/form-data">
	<div class="modal fade" id="editImageModel" tabindex="-1" role="dialog" aria-labelledby="editImageLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title" id="editImageLabel">Edit Image</h4>
	      </div>
	      <div class="modal-body">
	      	<input id="imageProductId" name="imageProductId" type="hidden">
	      	<input id="index" name="index" type="hidden">
	      	<div class="form-group">
	      		<label for="imageFile" class="col-md-3 control-label">Image file</label>
		      	<div class="col-md-7">
		        	<input id="imageFile" name="file" type="file">
		        </div>
	        </div>
	      	<div class="form-group">
	      		<label for="imageUrl" class="col-md-3 control-label">Image url</label>
		      	<div class="col-md-7">
		        	<input id="imageUrl" name="url" class="form-control" type="text">
		        </div>
	        </div>
	      	<div class="form-group">
	      		<label for="subBrandId" class="col-md-3 control-label">Bitauto ID</label>
		      	<div class="col-md-7">
		        	<input id="imageId" name="imageId" class="form-control" type="text">
		        </div>
	        </div>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="submit" class="btn btn-primary">Submit</button>
	      </div>
	    </div>
	  </div>
	</div>
</form>

<!-- Pick Image Modal -->
<div class="modal fade" id="pickImageModel" tabindex="-1" role="dialog" aria-labelledby="pickImageModel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-body">
      	<div id="thumb-container"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="submitPick()">Submit</button>
      </div>
    </div>
  </div>
</div>

</jsp:body>
</s:admin>
